<template>
  <div class="user">
    <h1>{{ msg }}</h1>
    <h2>{{idCard}} {{ idCard | sexIdcardFilter}}</h2>
    <h2>{{name}} {{ name | nameHide}}</h2>
    <h2>{{tel}} {{ tel | telHide}}</h2>
    <!-- 使用二维码 -->
    <qrcode :value="qrcodeNum" :options="{ size: 200 }"></qrcode>
    <!-- 使用条形码 -->
    <barcode :value="barcodeNum" :options="barcode_option"></barcode>
  </div>
</template>

<script>
// 引用 Tool 工具插件
import { Tool } from '../../plugins/tool'
// 引用生成二维码插件
import VueQrcode from '@xkeshi/vue-qrcode'
// 引用生成条形码插件
import VueBarcode from '@xkeshi/vue-barcode'
export default {
  name: 'user',
  components: {
    // 注册生成二维码插件
    'qrcode': VueQrcode,
    // 注册生成条形码插件
    'barcode': VueBarcode
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App 用户管理列表',
      // 二维码数据
      qrcodeNum: '123456789',
      // 条形码数据
      barcodeNum: '123456789',
      // 条形码的 :options
      barcode_option: {
        displayValue: false, // 是否默认显示条形码数据
        // textPosition  :'top', // 条形码数据显示的位置
        background: '#fff', // 条形码背景颜色
        valid: (valid) => {
          console.log(valid)
        },
        width: '1px',
        height: '55px',
        fontSize: '22px' // 字体大小
      },
      'idCard': '331004198704012712',
      'name': '诸葛孔明',
      'tel': '17682185004'
    }
  },
  mounted () {
    this.allList()
    // Tool 工具插件 使用例子
    Tool.setSession('name', 'wang')
    console.log(Tool.getSession('name'))
    let arr = [1, 3, 5, 4, 10, 2]
    console.log(Tool.arrSort(arr))
    Tool.setLocal('name1', 'wang1')
    let tel = '13912345678'
    console.log(Tool.telHide(tel))
    let idCard = '331004198704012712'
    console.log(Tool.IDcardHide(idCard))
    let name = 2.123111
    console.log(Tool.toDecimal2(name))
    let str = 'wang1'
    console.log(str)
    console.log(Tool.stringConvert(str, 'upper'))
    let arr1 = [1, 2, 3, 3, '3']
    let str1 = 'adasd'
    console.log(Tool.arrDistinct3(arr1))
    console.log(Tool.strAdd(str, tel, str1))
    let arr2 = [1, 3, 5, 96, 78, 4]
    console.log(Tool.arrSort6(arr2, (a, b) => b - a))
    console.log(Tool.selectionSort(arr2))
    console.log(Tool.insertionSort(arr2))
    console.log(Tool.shellSort(arr2))
    console.log(Tool.quickSort(arr2))
    console.log(Tool.randomColor(0, 255))
  },
  methods: {
    allList () {
      let data = '盗墓笔记'
      this.$http.get(`/novelSearchApi?name=${data}`).then((res) => {
        console.log(res)
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-weight: normal;
}
</style>
